<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<link href="../../css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
			}
			
			.mui-content {
				height: 100%;
				overflow: auto;
			}
			
			.red-point{
		      position: relative;
		    }
			
		    .red-point::before{
		      content: " ";
		      border: 5px solid #C9394A;/*设置红色*/
		      border-radius:5px;/*设置圆角*/
		      position: absolute;
		      z-index: 3000;
		      right: 0%;
		      margin-right: -10px;
		      margin-top: 0px;
		    }
			
			.head-img{
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title" style="z-index: 99999;">
			<span class="mui-action-back nav mui-pull-left title-color" style="line-height: 44px; margin-left: 5px;">通讯录</span>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner" id="friend_list">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/api/friendapi.js"></script>
		<script src="../../js/db/db.js"></script>
		<script src="../../js/db/dictionariesdb.js"></script>
		<script src="../../js/db/frienddb.js"></script>
		<script src="../../js/mui.indexedlist.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				// 监听当前webview的show事件
				var currentWebview = plus.webview.currentWebview();
				currentWebview.addEventListener("show", function() {
					// 同步服务器数据到本地
					friendapi.synchronizedFriends();
					// 从本地读取好友数据进行渲染
					initView();
					// 显示通讯录
					showList();
				});

				// 初始化页面数据
				function initView() {
					frienddb.select({
						userId: app.getUserId()
					}, (data) => {
						// console.log(JSON.stringify(data))
						// 从本地读取好友列表并渲染
						renderFriendList(data);
						// 给好友列表绑定点击事件
						listBindEvent();
						// 为好友头像批量绑定点击事件
						headBindEvent()
					})
				}


				// 从本地读取好友列表并渲染
				function renderFriendList(data) {
					let html = '<ul class="mui-table-view">';
					let oldWord = '';
					for (let f of data) {
						let word = f.word;
						if (word != oldWord) {
							oldWord = word;
							html += '<li data-group="' + word + '" class="mui-table-view-divider mui-indexed-list-group" >' +
								word + '</li>'
						}
						let thum_head_portrait = f.thum_head_portrait;
						let friend_id = f.friend_id;
						let nickname = f.nickname;
						let account = f.account;
						html +=
							'<li class="mui-media mui-table-view-cell mui-indexed-list-item chat-with-friend" style="padding: 8px 10px;" friend_user_id="' +
							friend_id + '" nickname="' + nickname + '" thum_head_portrait="' + thum_head_portrait + '" friendAccount="' +
							account + '">' +
							'<img class="mui-media-object mui-pull-left head-img" style="max-width: 35px;height: 35px;" src="' +
							thum_head_portrait +
							'" account="' + account + '"/>' +
							'<div class="mui-media-body" style="line-height: 35px;">' + nickname + '</div>' +
							'</li>'
					}
					html += '</ul>';
					// 渲染html
					document.getElementById("friend_list").innerHTML = html;
				}

				// 给好友列表绑定点击事件
				function listBindEvent() {
					mui("#friend_list").off("tap", ".chat-with-friend")
					mui("#friend_list").off("tap", ".head-img")
					// 为好友通讯录批量绑定点击事件
					mui("#friend_list").on("tap", ".chat-with-friend", function(e) {
						var friendUserId = this.getAttribute("friend_user_id");
						var friendNickname = this.getAttribute("nickname");
						var friendThumHeadPortrait = this.getAttribute("thum_head_portrait");
						var friendAccount = this.getAttribute("friendAccount");
						// 打开聊天子页面
						mui.openWindow({
							url: "../chat/chatting.html",
							id: "chatting-" + friendUserId, // 每个朋友的聊天页面都是唯一对应的
							show: {
								autoShow: false
							},
							extras: {
								friendUserId: friendUserId,
								friendNickname: friendNickname,
								friendThumHeadPortrait: friendThumHeadPortrait,
								friendAccount: friendAccount
							}
						});
					})
				}

				/**
				 * 为好友头像批量绑定点击事件
				 */
				function headBindEvent() {
					mui("#friend_list").on("tap", ".head-img", function(e) {
						var account = this.getAttribute("account");
						e.stopPropagation();
						friendapi.getFriendByAccount({
							userId: app.getUserId(),
							account: account
						}, (data) => {
							frienddb.updateExcute(data.word, data, () => {
								// 打开聊天子页面
								mui.openWindow({
									url: "../discover/friend-detail.html",
									id: 'friend-detail.html', // 每个朋友的聊天页面都是唯一对应的
									extras: {
										requestFriend: {
											id: data.id,
											account: data.account,
											nickname: data.nickname,
											thumHeadPortrait: data.thumHeadPortrait,
											address: data.address,
											span_signature: data.signature,
											isFriend: true
										}
									}
								});
							})
						})
					})
				}

				// 显示通讯录
				function showList() {
					var list = document.getElementById('list');
					list.style.height = document.body.offsetHeight + "px";
					// 创建列表显示
					window.indexedList = new mui.IndexedList(list);
				}

			});
		</script>

	</body>

</html>
